<template>
  <view class="home-container">
    <view class="header">
      <view class="head-fix">
        <view class="custom-nav" :style="{ paddingTop: navtop }">
          <image class="logo" src="/static/images/logo.png" mode="widthFix"></image>
          <view class="logo-txt">
            <view class="title">智慧工地</view>
            <view class="sub-title">Smart construction site</view>
          </view>
        </view>
        <view class="bg">
          <view class="notice">
            <uni-notice-bar :scrollable="true" :speed="50" single background-color="#FEF9E3" color="#D8834C" :text="notice"></uni-notice-bar>
          </view>
        </view>
      </view>
    </view>

    <scroll-view :style="{ height: `calc(100% - ${scrollTop})` }" scroll-y="true">
      <view class="bg mb-30">
        <view class="card-top">
          <view class="card-img">
            <view class="content">
              <view class="left">
                <view class="title">新街一井副立井</view>
                <view class="box">
                  <image class="jd-icon" src="/static/images/home/jd_icon1.png" mode="aspectFit"></image>
                  <view class="lab">当前进尺</view>
                  <view class="val">{{ jcObj.actualDepth || 0 }} m</view>
                </view>
                <view class="box">
                  <image class="jd-icon" src="/static/images/home/jd_icon2.png" mode="aspectFit"></image>
                  <view class="lab">本月计划</view>
                  <view class="val">{{ jcObj.planDepth || 0 }} m</view>
                </view>
                <view class="box">
                  <image class="jd-icon" src="/static/images/home/jd_icon3.png" mode="aspectFit"></image>
                  <view class="lab">总深度</view>
                  <view class="val">{{ jcObj.totalDepth || 0 }} m</view>
                </view>
              </view>
              <view class="right">
                <view class="wcd-chart">
                  <view style="width: 100%; height: 100%"><l-echart ref="chartWcdRef" @finished="initWcdlChart"></l-echart></view>
                  <view class="progress">{{ projectObj.progress }}%</view>
                </view>
                <view class="txt">项目完成度</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="bg mb-30 card-com card-xmgl">
        <view class="card-title">
          <view class="left">
            <i class="line"></i>
            <text>项目管理</text>
          </view>
        </view>
        <view class="content">
          <uni-row class="content-row1">
            <uni-col :span="8">
              <view class="box" @click="jumpPage(1)">
                <image class="xmgl-icon" src="/static/images/home/xmgl-icon1.png" mode=""></image>
                <text>掘进填报</text>
              </view>
            </uni-col>
            <uni-col :span="8">
              <view class="box" @click="jumpPage(2)">
                <image class="xmgl-icon" src="/static/images/home/xmgl-icon2.png" mode=""></image>
                <text>掘进工序</text>
              </view>
            </uni-col>
            <uni-col :span="8">
              <view class="box" @click="jumpPage(3)">
                <image class="xmgl-icon" src="/static/images/home/xmgl-icon3.png" mode=""></image>
                <text>事前上报</text>
              </view>
            </uni-col>
          </uni-row>

          <uni-row class="content-row2">
            <uni-col :span="8">
              <view class="box" @click="jumpPage(4)">
                <image class="xmgl-icon" src="/static/images/home/xmgl-icon4.png" mode=""></image>
                <text>安全整改</text>
              </view>
            </uni-col>
            <uni-col :span="8">
              <view class="box" @click="jumpPage(5)">
                <image class="xmgl-icon" src="/static/images/home/xmgl-icon5.png" mode=""></image>
                <text>隐患自查</text>
              </view>
            </uni-col>
            <uni-col :span="8">
              <view class="box" @click="jumpPage(6)">
                <image class="xmgl-icon" src="/static/images/home/xmgl-icon6.png" mode=""></image>
                <text>设备监测</text>
              </view>
            </uni-col>
          </uni-row>
        </view>
      </view>

      <view class="bg mb-30 card-com card-jjjc">
        <view class="card-title flex">
          <view class="left">
            <i class="line"></i>
            <text>掘进进尺</text>
          </view>
          <view class="right">
            <uni-datetime-picker class="picker-sty" v-model="jcDateRange" type="daterange" @change="getProgressMonth" />
          </view>
        </view>

        <uni-row :gutter="30" class="content-row">
          <uni-col :span="6">
            <view class="box bg1">
              <text>总深度</text>
              <text class="val">{{ jcObj.totalDepth || 0 }} m</text>
            </view>
          </uni-col>
          <uni-col :span="6">
            <view class="box bg2">
              <text>当前进尺</text>
              <text class="val">{{ jcObj.actualDepth || 0 }} m</text>
            </view>
          </uni-col>
          <uni-col :span="6">
            <view class="box bg3">
              <text>本月计划</text>
              <text class="val">{{ jcObj.planDepth || 0 }} m</text>
            </view>
          </uni-col>
          <uni-col :span="6">
            <view class="box bg4">
              <text>本月完成</text>
              <text class="val">{{ jcObj.finishDepth || 0 }} m</text>
            </view>
          </uni-col>
        </uni-row>

        <view class="jjgx-chart">
          <bar-chart chart-ref="chartJcRef" :chart-data="chartJcData" :barWidth="11" :barBorderRadius="10"></bar-chart>
        </view>
      </view>

      <view class="bg mb-30 card-com scfl-cart">
        <view class="card-title flex">
          <view class="left">
            <i class="line"></i>
            <text>生产方量统计</text>
          </view>
          <view class="right">
            <uni-datetime-picker class="picker-sty" v-model="scflDateRange" type="daterange" @change="getProduction" />
          </view>
        </view>
        <view class="scfl-chart">
          <bar-chart chart-ref="chartScflRef" :chart-data="chartBarData" :showBackground="true"></bar-chart>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
import { getProjectOverview, getExcavationProgressMonth } from '@/api/home';
import { getProductionStatistics } from '@/api/monitorCenter';
import {getNoticeList} from '@/api/system/notice.js'

export default {
  components: {},
  data() {
    return {
      navtop: '30rpx',
      scrollTop: '108px',
      jcDateRange: [],
      scflDateRange: [],
      chartBarData: {
        legendData: [],
        dataX: [],
        dataY: []
      },
      chartJcData: {
        legendData: ['计划进度', '实际进度'],
        dataX: [],
        dataY: [],
        colorList: [
          {
            bar0: 'rgba(46, 125, 255, 1)',
            bar1: 'rgba(107, 58, 255, 1)'
          },
          {
            bar0: 'rgba(0, 217, 120, 1)',
            bar1: 'rgba(11, 163, 0, 1)'
          }
        ]
      },
      projectObj: { progress: 0 },
      jcObj: {},
      notice:null
    };
  },
  onLoad(option) {
    // #ifdef MP-WEIXIN
    const { globalData } = getApp();
    this.navtop = globalData.winInfo.capsuleTop + 'px';
    // #endif
  },
  onShow() {
    this.getNotice()
    this.getProgressMonth();
    this.getProduction();
  },
  methods: {
    getNotice(){
      getNoticeList({pageNum:1,pageSize:1}).then(res=>{
        if(res.rows && res.rows.length){
          this.notice = res.rows[0].noticeTitle
        }else{
          this.notice=null
        }
        
      })
    },
    async initWcdlChart() {
      let progress = 0;
      const res = await getProjectOverview();
      if (res.code == 200) {
        this.projectObj = Object.assign({},res.data);
        progress = Number(this.projectObj.progress);
      }
      let option = {
        series: [
          {
            type: 'pie',
            radius: ['60%', '95%'],
            clockWise: false,
            hoverAnimation: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#fff',
              color: 'rgba(255,255,255,0.1)'
            },
            label: {
              show: false
            },
            data: [
              {
                value: 100
              }
            ]
          },
          {
            type: 'pie',
            radius: ['60%', '95%'],
            clockWise: false,
            hoverAnimation: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#fff',
              color: 'rgba(255,255,255,0.1)'
            },
            label: {
              show: false
            },
            data: [
              {
                value: progress,
                itemStyle: {
                  borderWidth: 0,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(255, 255, 255, 1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(255, 255, 255, 0.1)'
                    }
                  ])
                }
              },
              {
                value: 100 - progress,
                itemStyle: {
                  color: 'rgba(0,0,0,0)',
                  borderWidth: 0
                },
                label: {
                  show: false
                }
              }
            ]
          },
          {
            type: 'pie',
            radius: ['90%', '99%'],
            clockWise: false,
            hoverAnimation: false,
            // itemStyle: {
            //   borderWidth: 0,
            //   color: 'transparent'
            // },
            label: {
              show: false
            },
            data: [
              {
                value: progress,
                itemStyle: {
                  borderRadius: 10,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(255, 255, 255, 1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(159, 90, 255, 1)'
                    }
                  ])
                }
              },
              {
                value: 100 - progress,
                itemStyle: {
                  color: 'rgba(0,0,0,0)',
                  borderWidth: 0
                },
                label: {
                  show: false
                }
              }
            ]
          }
        ]
      };
      const chart = await this.$refs.chartWcdRef.init(echarts);
      chart.setOption(option);
    },

    getProgressMonth(e) {
      this.jcDateRange = e || [];
      let params = {};
      if (this.jcDateRange.length) {
        params = {
          startTime: this.jcDateRange[0],
          endTime: this.jcDateRange[1]
        };
      }
      getExcavationProgressMonth(params).then((res) => {
        this.jcObj = res.data;
        if (this.jcObj.dayList) {
          let dayList = this.jcObj.dayList;
          this.chartJcData.dataX = dayList.map((e) => e.progressDate.slice(5)) || [];
          let arr1 = dayList.map((e) => e.planDepth) || [];
          let arr2 = dayList.map((e) => e.meterCount) || [];
          this.chartJcData.dataY = [arr1, arr2];
        } else {
          this.jcObj.dayList = [];
          this.chartJcData.dataX = [];
          this.chartJcData.dataY = [];
        }
      });
    },

    getProduction(e) {
      this.scflDateRange = e || [];
      let params = {};
      if (this.scflDateRange.length) {
        params = {
          type: ' ',
          startTime: this.scflDateRange[0],
          endTime: this.scflDateRange[1]
        };
      }
      getProductionStatistics(params).then((res) => {
        let data = res.data;
        const { xdata, yData } = data.reduce(
          (acc, cur) => {
            acc.xdata.push(cur.name.slice(5));
            acc.yData.push(cur.value);
            return acc;
          },
          { xdata: [], yData: [] }
        );
        this.chartBarData.dataX = xdata;
        this.chartBarData.dataY = [yData];
      });
    },

    jumpPage(type) {
      let url = '';
      switch (type) {
        case 1:
          url = '/pages/fillout/index';
          break;
        case 2:
          url = '/pages/process/index';
          break;
        case 3:
          url = '/pages/prereport/index';
          break;
        case 4:
          url = '/pages/inspection/index';
          break;

        case 6:
          url = '/pages/monitor/index';
          break;

        default:
          break;
      }
      if (url) {
        this.$tab.navigateTo(url);
      }
    }
  }
};
</script>
<style>
page {
  min-height: 100%;
  height: auto;
}
</style>
<style lang="scss" scoped>
.home-container {
  height: 100%;

  .header {
    height: 108px;
  }
  .head-fix {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
  }
  .custom-nav {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    background: #fff;
    .logo {
      width: 95rpx;
      height: 66rpx;
    }
    .logo-txt {
      padding-left: 6rpx;
      color: #000000;
      .title {
        font-weight: bold;
        font-size: 42rpx;
        line-height: 42rpx;
      }
      .sub-title {
        font-size: 16rpx;
        line-height: 16rpx;
        padding-top: 6rpx;
      }
    }
  }

  .bg {
    background: #fff;
  }
  .mb-30 {
    margin-bottom: 30rpx;
  }
  .notice {
    padding: 20rpx 14rpx;
    ::v-deep .uni-noticebar {
      margin-bottom: 0px;
      font-size: 26rpx;
      border-radius: 10rpx;
    }
  }
  .card-top {
    padding: 0 14rpx 36rpx;
    display: flex;
    justify-content: center;
    .card-img {
      width: 100%;
      height: 303rpx;
      background: url('/static/images/home/card.png') no-repeat;
      background-size: 100% 100%;
    }
    .content {
      display: flex;
      justify-content: space-between;
      padding: 24rpx;
      box-sizing: border-box;

      .left {
        .title {
          font-weight: bold;
          font-size: 36rpx;
          color: #ffffff;
          line-height: 36rpx;
          padding-bottom: 10rpx;
        }
        .box {
          display: flex;
          align-items: center;
          color: #fff;
          padding-top: 28rpx;

          .jd-icon {
            width: 36rpx;
            height: 36rpx;
          }

          .lab {
            width: 117rpx;
            font-size: 20rpx;
            padding-left: 18rpx;
          }
          .val {
            font-size: 26rpx;
          }
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        padding-top: 16rpx;
        padding-right: 30rpx;
        .wcd-chart {
          width: 176rpx;
          height: 176rpx;
          position: relative;
          .progress {
            width: 60%;
            height: 60%;
            border-radius: 50%;
            background: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30rpx;
            line-height: 30rpx;
            color: #2e7dff;
            font-family: 快看世界体, 快看世界体;
          }
        }
        .txt {
          font-weight: bold;
          font-size: 26rpx;
          color: #ffffff;
          padding-top: 20rpx;
        }
      }
    }
  }
  .card-com {
    padding: 20rpx 0;
    .card-title {
      display: flex;
      font-weight: 500;
      font-size: 32rpx;
      line-height: 32rpx;
      color: #102c59;
      padding: 0 30rpx;
      .left {
        display: flex;
        align-items: center;
      }
      .line {
        display: block;
        width: 7rpx;
        height: 34rpx;
        background: #2e7dff;
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        margin-right: 10rpx;
      }
    }
    .card-title.flex {
      justify-content: space-between;
    }
  }

  .card-xmgl {
    .content {
      padding-top: 28rpx;
      .box {
        display: flex;
        flex-direction: column;
        align-items: center;
        .xmgl-icon {
          width: 71rpx;
          height: 71rpx;
        }
        text {
          padding-top: 12rpx;
        }
      }
      .content-row1 {
        padding-bottom: 30rpx;
      }
      .content-row2 {
        padding-bottom: 10rpx;
      }
    }
  }

  .card-jjjc {
    width: 100%;
    overflow: hidden;
    .card-title {
      padding-bottom: 38rpx;
    }
    .content-row {
      padding: 0 30rpx;
      .box {
        width: 100%;
        height: 88rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 22rpx;
        color: #ffffff;

        .val {
          font-size: 24rpx;
        }
      }
      .bg1 {
        background: url('/static/images/home/jjjc-icon1.png') no-repeat;
        background-size: 100% 100%;
      }
      .bg2 {
        background: url('/static/images/home/jjjc-icon2.png') no-repeat;
        background-size: 100% 100%;
      }
      .bg3 {
        background: url('/static/images/home/jjjc-icon3.png') no-repeat;
        background-size: 100% 100%;
      }
      .bg4 {
        background: url('/static/images/home/jjjc-icon4.png') no-repeat;
        background-size: 100% 100%;
      }
    }

    .jjgx-chart {
      padding: 20rpx 30rpx 0;
      height: 436rpx;
    }
  }
  .scfl-cart {
    .scfl-chart {
      padding: 20rpx 30rpx 0;
      height: 480rpx;
    }
  }

  .picker-sty {
    width: 380rpx;
  }
}

::v-deep .uni-date__x-input,
::v-deep .uni-date-x .range-separator {
  height: 42rpx;
  line-height: 42rpx;
  font-size: 24rpx;
  padding-left: 0;
}
</style>
